<template>
  <div class="divWidth">
    <div style="margin-top:2%">
      <el-container>
        <el-header><h2>{{$t('个人中心')}}}</h2></el-header>
      </el-container>
    </div>

    <el-descriptions class="margin-top" title="" :column="3" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="replace('service')">{{$t('返回网站')}}</el-button>
        <el-button type="primary" size="small" @click="replace('withdrawal')">{{$t('提现')}}</el-button>
        <el-button type="primary" size="small" @click="loginOut()">{{$t('退出登录')}}</el-button>
      </template>
      <el-descriptions-item :span="1.5">
        <template slot="label">
          <i class="el-icon-user"></i>
          {{$t('用户ID')}}
        </template>
        {{ userInfo.id }}
      </el-descriptions-item>
      <el-descriptions-item :span="1.5">
        <template slot="label">
          <i class="el-icon-user"></i>
          {{$t('用户名')}}
        </template>
        {{ userInfo.userName }}
      </el-descriptions-item>
      <el-descriptions-item :span="1.5">
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          {{$t('地区')}}
        </template>
        {{ userInfo.area }}
      </el-descriptions-item>
      <el-descriptions-item :span="1.5">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          {{$t('定价组')}}
        </template>
        {{ userInfo.level }}
      </el-descriptions-item>

      <el-descriptions-item v-if="userInfo.advancedUser==='转卖商'"  :span="3">
        <template slot="label">
          <i class="el-icon-key" :span="3"></i>
          API KEY
        </template>
        <p class="api-key" :title="$t('点击复制')" v-copy="userInfo?.apiKey" @click="handleCopy(userInfo?.apiKey)">{{ userInfo?.apiKey }}</p>
      </el-descriptions-item>

      <el-descriptions-item :span="3">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          {{$t('货币')}}
        </template>
        {{ userInfo.money }}
      </el-descriptions-item>

      <el-descriptions-item :span="3">

        <template slot="label">
          <i class="el-icon-time" :span="3"></i>
          {{$t('进行中')}}
        </template>
        {{ userInfo.doing }}
      </el-descriptions-item>

      <el-descriptions-item :span="3">

        <template slot="label">
          <i class="el-icon-s-goods" :span="3"></i>
          {{$t('累计充值')}}
        </template>
        {{ userInfo.rechargeMoney }}
      </el-descriptions-item>

      <el-descriptions-item :span="3">
        <template slot="label">
          <i class="el-icon-bell" :span="3"></i>
          {{$t('等待接受')}}
        </template>
        <div class="status-container">
          <div class="box b0" @click="jumpToOrderLog(0)">
            <div class="title">{{$t('等待接受')}}</div>
            <div class="number">{{ userInfo.waitingOrder }}</div>
          </div>
        </div>
      </el-descriptions-item>

      <el-descriptions-item :span="3">

        <template slot="label">
          <i class="el-icon-message-solid" :span="3"></i>
          {{$t('正在处理')}}
        </template>
        <div class="status-container">
          <div class="box b1" @click="jumpToOrderLog(1)">
            <div class="title">{{$t('正在处理')}}</div>
            <div class="number">{{ userInfo.doingOrder }}</div>
          </div>
        </div>
      </el-descriptions-item>

      <el-descriptions-item :span="3">

        <template slot="label">
          <i class="el-icon-success" :span="3"></i>
          {{$t('完成')}}
        </template>
        <div class="status-container">
          <div class="box b2" @click="jumpToOrderLog(2)">
            <div class="title">{{$t('完成')}}</div>
            <div class="number">{{ userInfo.doneOrder }}</div>
          </div>
        </div>
      </el-descriptions-item>

      <el-descriptions-item :span="3">

        <template slot="label">
          <i class="el-icon-error" :span="3"></i>
          {{$t('拒绝')}}
        </template>
        <div class="status-container">
          <div class="box b3" @click="jumpToOrderLog(3)">
            <div class="title">{{$t('拒绝')}}</div>
            <div class="number">{{ userInfo.refuseOrder }}</div>
          </div>
        </div>
      </el-descriptions-item>

    </el-descriptions>


  </div>

</template>
<script>
import apiService from "@/api/apiService";
import {isWx, loginOutUser, replace} from "@/utils";

export default {
  data() {
    return {
      statistics: {0: 0, 1: 0, 2: 0, 3: 0},
      userInfo: {},
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
      apiService.post("/user-info").then(res => {
        console.log(res)
        this.userInfo = res.data;
      })
    })
  },
  methods: {
    replace,
    loginOut(){
      this.$nextTick(function () {
        apiService.get("/login-out", {}).then(() => {
          loginOutUser()
          if (isWx()) {
            // fixme 客户又不要下面的返回栏了
            this.$router.replace({path: '/service'})
            // this.$router.push({path: '/service'})
          }
          this.$router.push({path: '/service'})
        })
      })
    },
    onSubmit() {
      console.log('submit!');
    },
    searchByStatus(val) {
      let req = this.orderSearchReq();
      req.apResult = val
      this.$emit('dialogSearch', req)
      this.closeDialog()
    },
    jumpToOrderLog(id) {
      let req = this.orderSearchReq();
      req.apResult=id
      console.log(req)
      //全写传参
       if (isWx()) {
         //fixme 客户又不要下面的返回栏了
         this.$router.replace({path: '/order-log', query:req})
      }
      this.$router.push({path: '/order-log', query:req})
    },
    orderSearchReq(){
      return  {
        imei:"",
        serviceId:"",
        apResult:"",
        orderFiled: 'update_time',
        orderBy: 'desc',
        page: 1,
        pageSize: 10
      };
    },
    // eslint-disable-next-line no-unused-vars
    handleCopy(copyText){
      this.$message.success("复制成功")
    }
  }
}
</script>

<style>

.status-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 1rem;
}

.box.b0 {
  border: 3px solid #e69912;
}

.box.b1 {
  border: 3px solid #3098de
}

.box.b2 {
  border: 3px solid #89c40e
}

.box.b3 {
  border: 3px solid #e54a3c;
}

.box {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 .1rem;
  height: 100%;
  width: fit-content;
  min-width: 32px;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 3px 4px;
}

.divWidth{
  width: 70%;
  margin: auto
}

.api-key{
  width: fit-content;
  color: #2296ff;
  cursor: pointer;
  border-bottom: solid 1px rgba(0,0,0,0);
}

.api-key:hover{
  border-bottom: solid 1px black;
  color: #0273db;
}

@media screen and (max-width: 992px) {
  .divWidth{
    width: 100%;
    margin: auto
  }
}
</style>
